<template>
    <div>
        <button @click="up">++</button>
        <button @click="down">--</button>
        <div class="div"></div>
        <div class="div div1"
             :style="`transform: perspective(500px) translate3d(0px, 0px, ${$data.z}px);`"
        >Moved
        </div>
    </div>
</template>
<style lang="less" scoped>
    .div {
        width: 60px;
        height: 60px;
        background-color: skyblue;
        transition: 0.3s;
    }

    .div1 {
        transform: perspective(0px) translate3d(0px, 0px, 0px);
        background-color: pink;

    }


</style>
<script>
    import {getHeight, getWidth} from "../../utils/dom";

    export default {
        methods: {
            up() {
                this.$data.z += 50
            },
            down() {
                this.$data.z -= 50
            }
        },
        data(props) {
            return {
                z: 0,
                page: {
                    width: getWidth(),
                    height: getHeight(),
                },
                bgk_r: {
                    width: getWidth(),
                    height: getHeight(),
                    fill: "#b0b0b0",
                },
                configCircle: {
                    x: 100,
                    y: 100,
                    radius: 70,
                    fill: "red",
                    stroke: "black",
                    strokeWidth: 4
                }
            };
        }
    }
</script>
